<template>
  <div>
    <div :style="listbox">
      <div :style="titlebox">用&nbsp;&nbsp;户&nbsp;&nbsp;管&nbsp;&nbsp;理</div>
      <div :style="contentbox">
        <div :style="[col, space1]">
          <div :style="[lable, searchlable1]">用户名称：</div>
          <div :style="[lable, searchtext1]">
            <input
              :style="[input, searchinput1]"
              v-model="userLoginName"
              type="text"
              maxlength="40"
              placeholder="请输入用户名称"
              value=""
            />
          </div>
          <div :style="[lable, searchlable2]">真实姓名：</div>
          <div :style="[lable, searchtext2]">
            <input
              :style="[input, searchinput1]"
              v-model="userRealName"
              type="text"
              maxlength="25"
              placeholder="请输入真实姓名"
              value=""
            />
          </div>
          <div :style="[lable, searchlable3]">拥有权限：</div>
          <div :style="[lable, searchtext3]">
            <select v-model="userPermission" :style="[input, searchselect1]">
              <option value="-1">全部</option>
              <option value="0">系统管理员</option>
              <option value="1">监测主管</option>
              <option value="2">值班员</option>
              <option value="3">保安</option>
              <option value="2">值班员</option>
            </select>
          </div>
          <div :style="[lable, searchlable4]">当前状态：</div>
          <div :style="[lable, searchtext4]">
            <select v-model="userDelete" :style="[input, searchselect1]">
              <option value="-1">全部</option>
              <option value="0">未删除</option>
              <option value="1">已删除</option>
            </select>
          </div>
        </div>
        <div :style="[col, space1]">
          <div :style="[lable, createBut1]">
            <button v-on:click="openAddAndEdit(0)" type="button" :style="btn1">
              创建用户
            </button>
          </div>
          <div :style="[lable, createBut2]">
            <button v-on:click="search()" type="button" :style="btn1">
              搜索用户
            </button>
          </div>
        </div>
        <div :style="[tablebox, space1]">
          <table>
            <tr :style="tr1">
              <th
                v-for="(item, ind) in columnList"
                :key="ind"
                :style="setThStyle(item)"
              >
                {{ item }}
              </th>
              <th>操作</th>
            </tr>
            <tr
              v-for="(item, index) in inforList"
              :key="index"
              :style="setTrStyle(index)"
            >
              <td
                v-for="(it, ind) in columnList"
                :key="ind"
                :style="setTdStyle()"
              >
                {{ item[it] }}
              </td>
              <td>
                <span
                  v-on:click="
                    openAddAndEdit(
                      1,
                      item['用户ID'],
                      item['用户名'],
                      item['真实姓名'],
                      item['手机号'],
                      item['所属部门'],
                      item['userPermission'],
                      item['userSex'],
                      item['密码']
                    )
                  "
                  >{{ item["操作1"] }}</span
                >&nbsp;&nbsp;&nbsp;
                <span
                  v-on:click="
                    deleteOrRecoveryUser(
                      item['用户ID'],
                      myUserId,
                      item['userDeleteSign']
                    )
                  "
                  >{{ item["操作2"] }}</span
                >
              </td>
            </tr>
          </table>
        </div>
        <div :style="page" v-if="lastPage">
          <span v-on:click="gotoNextPage()">下一页</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span v-on:click="gotoLastPage()">尾页</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <input
            :style="[input, searchinput2]"
            type="text"
            value=""
            v-model="gotoNum"
            @input="gotoNum = $event.target.value.replace(/\D+/, '')"
          />
          <button v-on:click="gotoPage()" type="button" :style="btn2">
            跳转</button
          >&nbsp;&nbsp;&nbsp;&nbsp;
          <span :style="textspan"
            >{{ glPageIndex + 1 }}/{{ glAllPage }}页 共{{ allNum }}条</span
          >
        </div>
        <div :style="page" v-if="firstPage">
          <span v-on:click="gotoFirstPage()">首页</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span v-on:click="gotoAgoPage()">上一页</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <input
            :style="[input, searchinput2]"
            type="text"
            value=""
            v-model="gotoNum"
            @input="gotoNum = $event.target.value.replace(/\D+/, '')"
          />
          <button v-on:click="gotoPage()" type="button" :style="btn2">
            跳转</button
          >&nbsp;&nbsp;&nbsp;&nbsp;
          <span :style="textspan"
            >{{ glPageIndex + 1 }}/{{ glAllPage }}页 共{{ allNum }}条</span
          >
        </div>
        <div :style="page" v-if="nextPage">
          <span v-on:click="gotoFirstPage()">首页</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span v-on:click="gotoAgoPage()">上一页</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span v-on:click="gotoNextPage()">下一页</span
          >&nbsp;&nbsp;&nbsp;&nbsp;
          <span v-on:click="gotoLastPage()">尾页</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <input
            :style="[input, searchinput2]"
            type="text"
            value=""
            v-model="gotoNum"
            @input="gotoNum = $event.target.value.replace(/\D+/, '')"
          />
          <button v-on:click="gotoPage()" type="button" :style="btn2">
            跳转</button
          >&nbsp;&nbsp;&nbsp;&nbsp;
          <span :style="textspan"
            >{{ glPageIndex + 1 }}/{{ glAllPage }}页 共{{ allNum }}条</span
          >
        </div>
      </div>
    </div>
    <div v-if="addAndEdit" :style="setupMaskbox">
      <input v-model="subUserId" type="hidden" value="" />
      <div :style="setupmainbox">
        <div :style="returnbox">
          <span v-on:click="returnPage()">X</span>
        </div>
        <div :style="titlebox1">
          {{ thitleword }}
        </div>
        <div :style="contentbox1">
          <div :style="lable1"></div>
          <div :style="lable1">用户名称：</div>
          <div :style="lable1"></div>
          <div :style="lable1">真实姓名：</div>
          <div :style="lable1"></div>
          <div :style="lable1">手机号码：</div>
          <div :style="lable1"></div>
          <div :style="lable1">所属部门：</div>
          <div :style="lable1"></div>
          <div :style="lable1">拥有权限：</div>
          <div :style="lable1"></div>
          <div :style="lable1">用户性别：</div>
          <div :style="lable1"></div>
          <div :style="lable1">登录密码：</div>
          <div :style="[text, top25]">
            <input
              v-model="subUserLoginName"
              :style="textinput"
              type="text"
              maxlength="40"
              placeholder="请输入用户名称"
              value=""
            />
          </div>
          <div :style="[text, top75]">
            <input
              v-model="subUserRealName"
              :style="textinput"
              type="text"
              maxlength="25"
              placeholder="请输入真实姓名"
              value=""
            />
          </div>
          <div :style="[text, top125]">
            <input
              v-model="subUserPhoneNumber"
              :style="textinput"
              type="text"
              maxlength="11"
              placeholder="请输入手机号码"
              value=""
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </div>
          <div :style="[text, top175]">
            <input
              v-model="subUserDept"
              :style="textinput"
              type="text"
              placeholder="所属部门"
              value=""
            />
          </div>
          <div :style="[text, top225]">
            <select
              v-model="subUserPermission"
              :style="[textinput, searchselect1]"
            >
              <option value="0">系统管理员</option>
              <option value="1">监测主管</option>
              <option value="2">值班员</option>
            </select>
          </div>
          <div :style="[text, top275]">
            <select v-model="subUserSex" :style="[textinput, searchselect1]">
              <option value="0">男</option>
              <option value="1">女</option>
            </select>
          </div>
          <div :style="[text, top325]">
            <input
              v-model="subUserLoginPwd"
              :style="textinput"
              type="password"
              maxlength="8"
              placeholder="请输入密码"
              value=""
            />
          </div>
          <div :style="[text, top375]">
            <div :style="buttionbox">
              <button
                v-on:click="addAndEditSubmit()"
                type="button"
                :style="btn123"
              >
                提&nbsp;&nbsp;交
              </button>
            </div>
            <div id="messid" :style="messbox">
              {{ mess }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import swal from "sweetalert";
export default {
  name: "usermanage",
  mounted() {
    this.sessionId = this.$route.query.username;
    this.getUserList();
  },
  methods: {
    deleteOrRecoveryUser: function (userId, myUserId, userDelete) {
      if (userId === this.myUserId) {
        swal({
          title: "提示",
          text: "不能删除自身！",
          icon: "warning",
          button: "确定",
        });
        return;
      }
      let upDateDeletePostData = {
        userId: userId,
        myUserId: myUserId,
        userDelete: userDelete,
        sessionId: this.sessionId,
      };
      this.axios
        .get(
          process.env.VUE_APP_BASE_API +
            "/monitor-usermanage/usermanage/deleteOrRecoveryUser",
          {
            params: {
              ...upDateDeletePostData,
            },
          }
        )
        .then((response) => {
          if (response.data.message === "success") {
            swal({
              title: "提示",
              text: response.data.success,
              icon: "success",
              button: "确定",
            }).then(() => {
              this.getUserList();
            });
          }
        })
        .catch((error) => {
          if (error.response.status === 401) {
            swal({
              title: "提示",
              text: "页面过期请重新登录",
              icon: "warning",
              button: "确定",
            }).then(() => {
              this.$router.push({ path: "/" });
            });
          } else if (error.response.status === 402) {
            swal({
              title: "提示",
              text: "非法访问强制退出",
              icon: "warning",
              button: "确定",
            }).then(() => {
              this.$router.push({ path: "/" });
            });
          }
        });
    },
    setThStyle: function (item) {
      if (item === "性别") {
        return "width: 40px";
      } else if (item === "当前状态") {
        return "width: 70px";
      } else if (item === "手机号") {
        return "width: 100px";
      } else if (item === "拥有权限") {
        return "width: 90px";
      }
    },
    setTdStyle: function () {
      return "color: #AAAAAA";
    },
    addAndEditSubmit: function () {
      let addPostData = {};
      let url = "";
      if (this.submitSign === 0) {
        url =
          process.env.VUE_APP_BASE_API +
          "/monitor-usermanage/usermanage/adduser";
        addPostData = {
          myUserId: this.myUserId,
          subUserLoginName: this.subUserLoginName.trim(),
          subUserRealName: this.subUserRealName.trim(),
          subUserPhoneNumber: this.subUserPhoneNumber.trim(),
          subUserDept: this.subUserDept.trim(),
          subUserPermission: this.subUserPermission,
          subUserSex: this.subUserSex,
          subUserLoginPwd: this.subUserLoginPwd.trim(),
          sessionId: this.sessionId,
        };
      } else {
        url =
          process.env.VUE_APP_BASE_API +
          "/monitor-usermanage/usermanage/editUser";
        let pwd = "";
        let pwd1 = "";
        if (this.subUserLoginPwd.trim() === "") {
          pwd = "00000000";
        } else {
          if (this.subUserId === this.myUserId) {
            swal({
              title: "提示",
              text: "请通过“设置”修改自身密码！",
              icon: "warning",
              button: "确定",
            });
            return;
          }
          pwd1 = this.subUserLoginPwd.trim();
          pwd = this.subUserLoginPwd.trim();
        }
        addPostData = {
          myUserId: this.myUserId,
          subUserId: this.subUserId,
          subUserLoginName: this.subUserLoginName.trim(),
          subUserRealName: this.subUserRealName.trim(),
          subUserPhoneNumber: this.subUserPhoneNumber.trim(),
          subUserDept: this.subUserDept.trim(),
          subUserPermission: this.subUserPermission,
          subUserSex: this.subUserSex,
          subUserLoginPwd: pwd,
          userPwd: pwd1,
          sessionId: this.sessionId,
        };
      }
      this.axios
        .get(url, {
          params: {
            ...addPostData,
          },
        })
        .then((response) => {
          if (response.data.message === "success") {
            if (this.submitSign === 0) {
              swal({
                title: "提示",
                text: "用户添加成功！",
                icon: "success",
                button: "确定",
              }).then(() => {
                this.pageIndex = 0;
                this.returnPage();
                this.getUserList();
              });
            } else {
              swal({
                title: "提示",
                text: "用户编辑成功！",
                icon: "success",
                button: "确定",
              }).then(() => {
                this.returnPage();
                this.getUserList();
              });
            }
          } else {
            this.mess = response.data.message;
          }
        })
        .catch((error) => {
          if (error.response.status === 401) {
            swal({
              title: "提示",
              text: "页面过期请重新登录",
              icon: "warning",
              button: "确定",
            }).then(() => {
              this.$router.push({ path: "/" });
            });
          } else if (error.response.status === 402) {
            swal({
              title: "提示",
              text: "非法访问强制退出",
              icon: "warning",
              button: "确定",
            }).then(() => {
              this.$router.push({ path: "/" });
            });
          }
        });
    },
    returnPage: function () {
      this.submitSign = 0;
      this.subUserLoginName = "";
      this.subUserRealName = "";
      this.subUserPhoneNumber = "";
      this.subUserDept = "";
      this.subUserPermission = 0;
      this.subUserSex = 0;
      this.subUserLoginPwd = "";
      this.mess = "";
      this.addAndEdit = false;
    },
    openAddAndEdit: function (
      sign,
      subUserId,
      subUserLoginName,
      subUserRealName,
      subUserPhoneNumber,
      subUserDept,
      subUserPermission,
      subUserSex,
      subUserLoginPwd
    ) {
      this.submitSign = sign;
      if (sign === 0) {
        this.thitleword = "新 增 用 户";
      } else {
        this.thitleword = "修 改 用 户";
        this.subUserId = subUserId;
        this.subUserLoginName = subUserLoginName;
        this.subUserRealName = subUserRealName;
        this.subUserPhoneNumber = subUserPhoneNumber;
        this.subUserDept = subUserDept;
        this.subUserPermission = subUserPermission;
        this.subUserSex = subUserSex;
        this.oldUserLoginPwd = subUserLoginPwd;
      }
      this.addAndEdit = true;
    },
    search: function () {
      this.pageIndex = 0;
      this.getUserList();
    },
    gotoPage: function () {
      let page = this.gotoNum;
      if (!/^\d*$/.test(page)) {
        swal({
          title: "警告",
          text: "页码必须为正整数！",
          icon: "warning",
          button: "确定",
        });
        return;
      }
      if (page === "") {
        swal({
          title: "警告",
          text: "请输入页码！",
          icon: "warning",
          button: "确定",
        });
        return;
      }
      if (Number(page) === 0) {
        swal({
          title: "警告",
          text: "页码不能为0!",
          icon: "warning",
          button: "确定",
        });
        return;
      }
      if (Number(page) > this.glAllPage) {
        swal({
          title: "警告",
          text: "超过最大页码！",
          icon: "warning",
          button: "确定",
        });
        return;
      }
      this.pageIndex = Number(page) - 1;
      this.getUserList();
    },
    gotoAgoPage: function () {
      this.pageIndex = this.glPageIndex - 1;
      this.getUserList();
    },
    gotoFirstPage: function () {
      this.pageIndex = 0;
      this.getUserList();
    },
    gotoLastPage: function () {
      this.pageIndex = this.glAllPage - 1;
      this.getUserList();
    },
    gotoNextPage: function () {
      this.pageIndex = this.glPageIndex + 1;
      this.getUserList();
    },
    getUserList: function () {
      let postData = {
        userLoginName: this.userLoginName.trim(),
        userRealName: this.userRealName.trim(),
        userPermission: this.userPermission,
        userDelete: this.userDelete,
        pageIndex: this.pageIndex,
        everyPageDataCount: this.everyPageDataCount,
        sessionId: this.sessionId,
      };
      this.axios
        .get(
          process.env.VUE_APP_BASE_API +
            "/monitor-usermanage/usermanage/queryUserList",
          {
            params: {
              ...postData,
            },
          }
        )
        .then((response) => {
          this.myUserId = response.data.userId;
          this.allPage = response.data.allPage;
          this.pageIndex = response.data.pageIndex;
          this.allNum = response.data.allNum;
          this.glAllPage = this.allPage;
          this.glPageIndex = this.pageIndex;
          if (this.allPage > 1) {
            if (this.pageIndex === 0) {
              this.lastPage = true;
              this.nextPage = false;
              this.firstPage = false;
            } else if (this.pageIndex === this.allPage - 1) {
              this.firstPage = true;
              this.lastPage = false;
              this.nextPage = false;
            } else {
              this.nextPage = true;
              this.firstPage = false;
              this.lastPage = false;
            }
          } else {
            this.firstPage = false;
            this.lastPage = false;
            this.nextPage = false;
          }
          let list = response.data.list;
          this.inforList = [
            {
              用户名: "",
              真实姓名: "",
              手机号: "",
              所属部门: "",
              性别: "",
              拥有权限: "",
              当前状态: "",
              密码: "",
              用户ID: "",
            },
          ];
          for (var i = 0; i < list.length; i++) {
            let sex = list[i].userSex;
            let userSex = list[i].userSex;
            if (sex === 0) {
              sex = "男";
            } else {
              sex = "女";
            }
            let permission = list[i].userPermission;
            let userPermission = list[i].userPermission;
            if (permission === 0) {
              permission = "系统管理员";
            } else if (permission === 1) {
              permission = "监测主管";
            } else {
              permission = "值班员";
            }
            let userDelete = list[i].userDelete;
            let userDeleteSign = list[i].userDelete;
            let caozuo2 = "删除数据";
            if (userDelete === 0) {
              userDelete = "未删除";
              userDeleteSign = 1;
            } else {
              userDelete = "已删除";
              caozuo2 = "恢复数据";
              userDeleteSign = 0;
            }
            this.inforList[i] = {
              用户名: list[i].userLoginName,
              真实姓名: list[i].userRealName,
              手机号: list[i].userPhoneNumber,
              所属部门: list[i].userDept,
              性别: sex,
              拥有权限: permission,
              当前状态: userDelete,
              密码: list[i].userLoginPwd,
              用户ID: list[i].userId,
              操作1: "编辑",
              操作2: caozuo2,
              userDeleteSign: userDeleteSign,
              userPermission: userPermission,
              userSex: userSex,
            };
          }
        })
        .catch((error) => {
          if (error.response.status === 401) {
            swal({
              title: "提示",
              text: "页面过期请重新登录",
              icon: "warning",
              button: "确定",
            }).then(() => {
              this.$router.push({ path: "/" });
            });
          } else if (error.response.status === 402) {
            swal({
              title: "提示",
              text: "非法访问强制退出",
              icon: "warning",
              button: "确定",
            }).then(() => {
              this.$router.push({ path: "/" });
            });
          }
        });
    },
    setTrStyle: function (index) {
      if (index % 2 === 0) {
        return "background: #0B2945";
      }
    },
  },
  data() {
    return {
      sessionId: "",
      columnList: [
        "用户名",
        "真实姓名",
        "手机号",
        "所属部门",
        "性别",
        "拥有权限",
        "当前状态",
      ],
      myUserId: -1,
      gotoNum: "",
      inforList: "",
      allPage: 0,
      pageIndex: 0,
      glPageIndex: 0,
      glAllPage: 0,
      allNum: 0,
      everyPageDataCount: 10,
      firstPage: false,
      lastPage: false,
      nextPage: false,
      userLoginName: "",
      userRealName: "",
      userPermission: -1,
      userDelete: -1,
      addAndEdit: false,
      thitleword: "",
      submitSign: 0,
      subUserId: "",
      subUserLoginName: "",
      subUserRealName: "",
      subUserPhoneNumber: "",
      subUserDept: "",
      subUserPermission: 0,
      subUserSex: 0,
      subUserLoginPwd: "",
      oldUserLoginPwd: "",
      mess: "",
      top25: {
        top: "25px",
      },
      top75: {
        top: "75px",
      },
      top125: {
        top: "125px",
      },
      top175: {
        top: "175px",
      },
      top225: {
        top: "225px",
      },
      top275: {
        top: "275px",
      },
      top325: {
        top: "325px",
      },
      top375: {
        top: "375px",
      },
      btn123: {
        width: "50px",
        height: "25px",
      },
      messbox: {
        position: "absolute",
        width: "260px",
        height: "25px",
        marginLeft: "60px",
        color: "#FF0000",
      },
      buttionbox: {
        position: "absolute",
        width: "60px",
        height: "25px",
      },
      textinput: {
        border: "1px solid #006699",
        width: "315px",
        height: "20px",
        backgroundColor: "#174A7F",
        lineHeight: "20px",
        color: "#FFFFFF",
        textIndent: "10px",
      },
      text: {
        position: "absolute",
        width: "320px",
        height: "25px",
        lineHeight: "25px",
        textAlign: "left",
        color: "#E7EC92",
        left: "75px",
        textOverflow: "ellipsis",
        overflow: "hidden",
        whiteSpace: "nowrap",
      },
      lable1: {
        position: "relative",
        width: "75px",
        height: "25px",
        lineHeight: "25px",
        textAlign: "right",
        color: "#E7EC92",
      },
      contentbox1: {
        position: "absolute",
        width: "395px",
        height: "460px",
        marginTop: "30px",
        marginLeft: "28px",
      },
      returnbox: {
        position: "absolute",
        width: "20px",
        height: "24px",
        marginLeft: "55px",
        color: "#FFFFFF",
        lineHeight: "24px",
        zIndex: "100",
        marginTop: "8px",
      },
      titlebox1: {
        position: "absolute",
        width: "129px",
        height: "24px",
        marginLeft: "50px",
        marginTop: "8px",
        textAlign: "center",
        lineHeight: "24px",
        color: "#E7EC92",
      },
      setupmainbox: {
        position: "relative",
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat",
        backgroundImage: "url(" + require("@/assets/img/10.png") + ")",
        width: "450px",
        height: "500px",
        margin: "0px auto",
        top: "20px",
      },
      textspan: {
        cursor: "auto !important",
        color: "#E7EC92",
      },
      setupMaskbox: {
        position: "fixed",
        left: "0px",
        top: "0px",
        width: "100%",
        height: "100%",
        background: "rgba(2, 2, 2, 0.8)",
      },
      btn2: {
        width: "40px",
        height: "20px",
        fontSize: "12px",
      },
      searchinput2: {
        width: "50px",
        height: "15px",
        backgroundColor: "#001B38",
      },
      page: {
        position: "relative",
        width: "954px",
        height: "25px",
        textAlign: "center",
        color: "#FFFFFF",
        lineHeight: "25px",
      },
      tr1: {
        background: "#1E4E7F",
        color: "#E7EC92",
      },
      tr2: {
        background: "#0B2945",
      },
      tablebox: {
        position: "relative",
        width: "954px",
        height: "315px",
      },
      btn1: {
        width: "80px",
        fontSize: "14px",
        height: "25px",
      },
      createBut1: {
        width: "80px",
        right: "10px",
        height: "25px",
      },
      createBut2: {
        width: "80px",
        right: "100px",
        height: "25px",
      },
      searchinput1: {
        width: "150px",
      },
      searchselect1: {
        width: "150px",
        height: "25px",
      },
      searchtext4: {
        width: "150px",
        marginLeft: "780px",
        color: "#FFFFFF",
      },
      searchtext3: {
        width: "150px",
        marginLeft: "545px",
        color: "#FFFFFF",
      },
      searchtext2: {
        width: "150px",
        marginLeft: "310px",
        color: "#FFFFFF",
      },
      searchtext1: {
        width: "150px",
        marginLeft: "75px",
        color: "#FFFFFF",
      },
      searchlable1: {
        width: "75px",
        marginLeft: "0px",
        color: "#E7EC92",
      },
      searchlable2: {
        width: "75px",
        marginLeft: "235px",
        color: "#E7EC92",
      },
      searchlable3: {
        width: "75px",
        marginLeft: "470px",
        color: "#E7EC92",
      },
      searchlable4: {
        width: "75px",
        marginLeft: "705px",
        color: "#E7EC92",
      },
      input: {
        border: "1px solid #006699",
        height: "20px",
        backgroundColor: "#174A7F",
        lineHeight: "20px",
        color: "#FFFFFF",
        textIndent: "10px",
      },
      lable: {
        position: "absolute",
        height: "25px",
        textAlign: "center",
        lineHeight: "25px",
      },
      space1: {
        marginTop: "3px",
      },
      col: {
        position: "relative",
        width: "954px",
        height: "25px",
        lineHeight: "25px",
      },
      listbox: {
        position: "relative",
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat",
        backgroundImage: "url(" + require("@/assets/img/13.png") + ")",
        width: "1000px",
        height: "450px",
        marginLeft: "200px",
        top: "0px",
      },
      titlebox: {
        position: "absolute",
        width: "115px",
        height: "30px",
        marginLeft: "75px",
        marginTop: "-2px",
        color: "#E7EC92",
        lineHeight: "30px",
        textAlign: "center",
      },
      contentbox: {
        background: "#001B38",
        position: "absolute",
        width: "954px",
        height: "372px",
        marginLeft: "22px",
        marginTop: "48px",
      },
    };
  },
};
</script>
<style scoped>
span:hover {
  color: #85c5e8 !important;
}
span {
  cursor: pointer !important;
}
button:focus,
input::-moz-focus-inner,
button::-moz-focus-inner {
  outline: 0;
}
button:hover {
  background-color: #87cdf1;
}
button:active {
  background-color: #006699;
}
button {
  cursor: pointer !important;
  background-color: #3ba4ef;
  color: #ffffff;
  border-radius: 5px;
  border: none;
  outline: 0;
}
table {
  border: 1px;
  width: 954px;
  table-layout: fixed;
}
table tr {
  height: 25px;
  width: 100%;
  color: #ffffff;
}
table tr th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table tr td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
